import Taro, {Component, Config} from '@tarojs/taro'
import { View, Image, Input, Button } from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import './index.less'

import SearchIcon from '../../../../images/ic_search_black.png'
import MoreIcon from '../../../../images/ic_next.png'
import ServiceIcon from '../../../../images/ic_service_black.png'

export default class HelpListPage extends Component {

  config: Config = {
    navigationBarTitleText: '帮助'
  }

  render () {
    const { statusBarHeight } = Taro.getSystemInfoSync()
    const bottomH = statusBarHeight == 44 ? 34 : 0

    return (
      <SDBody sd-class='container'>
        <View className="section-search">
          <View className="search-content">
            <Image className="search-icon" src={SearchIcon}></Image>
            <Input className="search-input" placeholder='搜索' placeholderStyle='color: #999;' confirmType='search' onConfirm={this.doSearch}/>
          </View>
        </View>

        <View className="main-section">
          <View className="cell-item border-bottom_1px" onClick={this.gotoDetail}>
            <View className="title">发货时间？</View>
            <Image className="icon" src={MoreIcon}></Image>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoDetail}>
            <View className="title">如何取消订单？</View>
            <Image className="icon" src={MoreIcon}></Image>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoDetail}>
            <View className="title">修改订单地址或电话？</View>
            <Image className="icon" src={MoreIcon}></Image>
          </View>
          <View className="cell-item border-bottom_1px" onClick={this.gotoDetail}>
            <View className="title">如何办理退换货？</View>
            <Image className="icon" src={MoreIcon}></Image>
          </View>
          <View className="cell-item" onClick={this.gotoDetail}>
            <View className="title">退货后什么时侯退款？</View>
            <Image className="icon" src={MoreIcon}></Image>
          </View>
        </View>

        <View style='height:118rpx;'></View>
        <View className="fixed-bottom">
          <Button className="btn-clear bottom-bar border-top_1px" openType='contact'>
            <Image className="icon" src={ServiceIcon}></Image>
            <View className="title">在线客服</View>
          </Button>
          <View style={`height: ${bottomH}px;`}></View>
        </View>
      </SDBody>
    )
  }

  doSearch = () => {

  }

  gotoDetail = () => {
    SDUtils.jumpTo('/pages/other/help/detail/index')
  }
}
